<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Material Landing - Free Bootstrap Templates and Themes | NgTemplates</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300,300italic,500italic|Roboto+Condensed:400,300" rel="stylesheet">
    <link href="bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles/bootstrap.css">
    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/modernizr.js"></script>
  </head>
  <body data-spy="scroll" data-target=".header" data-offset="80">
    <!--if lt IE 9<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    -->
    <div id="ip-container" class="ip-container">
      <header class="ip-header">
        <div class="ip-loader">
          <svg width="60px" height="60px" viewBox="0 0 80 80" class="ip-inner">
            <path d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z" class="ip-loader-circlebg"></path>
            <path id="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z" class="ip-loader-circle"></path>
          </svg>
        </div>
      </header>
      <div class="ip-main">
        <!-- Mobile nav -->
        <div id="cbp-spmenu" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right">
          <div class="mobile_nav_close_button"><a id="hideRight" href=""><span class="close_icon zmdi zmdi-arrow-right"></span></a></div>
          <nav id="mobile_menu_content" class="navbar-nav-mobile"><a href="#hero">Home</a><a href="#features">Features</a><a href="#faq">FAQ</a><a href="#newsletter">Newsletter</a><a href="#contact">Contact</a></nav>
        </div>
        <header id="header" class="header navbar navbar-light animated">
          <div class="container"><a href="#" class="navbar-brand"> <span class="logo">M</span><span class="brand-txt">Material</span></a>
            <div class="navbar">
              <ul class="nav navbar-nav pull-right">
                <li class="nav-item"><a href="#hero">Home</a></li>
                <li class="nav-item"><a href="#features">Features</a></li>
                <li class="nav-item"><a href="#faq">FAQ                            </a></li>
                <li class="nav-item"><a href="#newsletter">Newsletter</a></li>
                <li class="nav-item"><a href="#contact">Contact</a></li>
              </ul>
              <div class="pull-right togger-container"><span id="showRight" class="zmdi zmdi-menu navbar-toggler"></span></div>
            </div>
          </div>
        </header>
        <div class="main-content">
          <div id="hero" class="hero">
            <div class="hero-inner"> 
              <div class="container">
                <div class="col-lg-6 col-lg-offset-3">
                  <h2>Material Design Admin Template</h2>
                  <p>Material admin is a Google Material Design inspired admin dashboard template built with Bootstrap and AngularJS.</p><a href="http://themeforest.net/item/material-design-admin-with-angularjs/13582227?ref=arousing" target="_blank" class="btn btn-primary btn-cta btn-lg btn-raised ui-wave">Download Material</a>
                </div>
              </div>
            </div>
          </div>
          <div id="features" class="features">
            <header>
              <h2 class="section-heading-underline">Key Features</h2>
            </header>
            <div class="container">
              <div class="row">
                <div class="feature-item col-md-4 text-center wow fadeInUp">
                  <div class="icon-container"><span class="zmdi zmdi-palette"></span></div>
                  <h3>Multiple Colors</h3>
                  <div class="desc">
                    <p>18 predefined color schemes</p>
                  </div>
                </div>
                <div data-wow-delay="0.3s" class="feature-item col-md-4 text-center wow fadeInUp">
                  <div class="icon-container"><span class="zmdi zmdi-view-web"></span></div>
                  <h3>Powerful Layouts</h3>
                  <div class="desc">
                    <p>multiple layouts to choose from</p>
                  </div>
                </div>
                <div data-wow-delay="0.6s" class="feature-item col-md-4 text-center wow fadeInUp">
                  <div class="icon-container"><span class="zmdi zmdi-desktop-windows"></span></div>
                  <h3>AngularJS Web App</h3>
                  <div class="desc">
                    <p>single page application with AngularJS</p>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="feature-item col-md-4 text-center wow fadeInUp">
                  <div class="icon-container"><span class="zmdi zmdi-tablet-mac"></span></div>
                  <h3>Responsive Design</h3>
                  <div class="desc">
                    <p>mobile-ready design adopt to any device</p>
                  </div>
                </div>
                <div data-wow-delay="0.3s" class="feature-item col-md-4 text-center wow fadeInUp">
                  <div class="icon-container"><span class="zmdi zmdi-edit"></span></div>
                  <h3>Clean code</h3>
                  <div class="desc">
                    <p>simple and clean JavaScript code</p>
                  </div>
                </div>
                <div data-wow-delay="0.6s" class="feature-item col-md-4 text-center wow fadeInUp">
                  <div class="icon-container"><span class="zmdi zmdi-pin"></span></div>
                  <h3>Internationalization</h3>
                  <div class="desc">
                    <p>internationalization and localization</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="faq" class="faq">
            <div class="container">
              <header>
                <h2 class="section-heading-underline">FAQs</h2>
              </header>
              <ul class="faq-list">
                <li class="wow fadeInLeft">
                  <h4 class="faq-q">What browsers does Angular work with?</h4>
                  <p class="faq-a">We run our extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).</p>
                </li>
                <li class="wow fadeInRight">
                  <h4 class="faq-q">Does Angular use the jQuery library?</h4>
                  <p class="faq-a">Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.</p>
                </li>
                <li data-wow-delay="0.15s" class="wow fadeInLeft">
                  <h4 class="faq-q">What is testability like in Angular?</h4>
                  <p class="faq-a">Very testable and designed this way from ground up. It has an integrated dependency injection framework, provides mocks for many heavy dependencies (server-side communication). See ngMock for details.</p>
                </li>
                <li data-wow-delay="0.15s" class="wow fadeInRight">
                  <h4 class="faq-q">Can I use the Angular logo artwork?</h4>
                  <p class="faq-a">Yes! You can find design files in our github repository, under "angular.js/images/logo" The logo design is licensed under a "Creative Commons Attribution-ShareAlike 3.0 Unported License".</p>
                </li>
                <li data-wow-delay="0.3s" class="wow fadeInLeft">
                  <h4 class="faq-q">Why is the namespace called "ng"?</h4>
                  <p class="faq-a">Because HTML has Angular brackets and "ng" sounds like "Angular". AngularJS is 100% JavaScript, 100% client-side and compatible with both desktop and mobile browsers. </p>
                </li>
                <li data-wow-delay="0.3s" class="wow fadeInRight">
                  <h4 class="faq-q">Is AngularJS a library, framework, plugin or a browser extension?</h4>
                  <p class="faq-a">AngularJS fits the definition of a framework the best, even though it's much more lightweight than a typical framework and that's why many confuse it with a library.</p>
                </li>
              </ul>
            </div>
          </div>
          <div id="newsletter" data-stellar-background-ratio="0.6" class="newsletter">
            <h2>Sign up to Our newsletter</h2>
            <form>
              <fieldset>
                <div class="form-group">
                  <div class="ui-input-group">
                    <input id="name_2" type="text" required class="form-control"><span class="input-bar"></span>
                    <label>Email</label>
                  </div>
                </div><a href="javascript:;" type="submit" data-wow-delay="0.15s" class="btn btn-primary btn-lg btn-raised ui-wave wow fadeInUp">Subscribe</a>
              </fieldset>
            </form>
          </div>
          <div id="contact" class="contact">
            <div class="container">
              <div class="row">
                <div class="col-md-5">
                  <h3 class="section-heading-underline">Contact Info</h3>
                  <div class="contact-info-container wow fadeInLeft">
                    <p class="lead"> Feel free to contact us, if you have any questions, we'll be glad to help.</p>
                    <ul class="list-unstyled contact-info">
                      <li> <span class="zmdi zmdi-pin"></span>San Mateo, CA, 94403</li>
                      <li><span class="zmdi zmdi-phone"></span>(012) 345 6789</li>
                      <li><span class="zmdi zmdi-email"></span>mail@domain.com</li>
                      <li><span class="zmdi zmdi-city-alt"></span>www.site.com</li>
                    </ul>
                  </div>
                </div>
                <div class="col-md-5 col-md-offset-2">
                  <h3 class="section-heading-underline">Contact Us</h3>
                  <form novalidate class="form-horizontal wow fadeInRight">
                    <fieldset>
                      <div class="form-group">
                        <div class="ui-input-group">
                          <input type="text" required class="form-control"><span class="input-bar"></span>
                          <label>Email</label>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="ui-input-group">
                          <input type="text" required class="form-control"><span class="input-bar"></span>
                          <label>Password</label>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="ui-input-group">
                          <textarea type="text" required rows="5" class="form-control"></textarea><span class="input-bar"></span>
                          <label>Message                                </label>
                        </div>
                      </div>
                      <div class="divider"></div>
                      <div class="form-group">
                        <button class="btn btn-raised btn-primary btn-w-sm ui-wave">SUBMIT</button>
                      </div>
                    </fieldset>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="action-call text-center"><span>Build with your favorite Bootstrap, get up and running in minutes</span><a href="http://themeforest.net/item/material-design-admin-with-angularjs/13582227?ref=arousing" target="_blank" class="btn btn-default btn-cta btn-lg btn-raised ui-wave">Download Material<span class="zmdi zmdi-chevron-right"></span></a></div>
        </div>
        <footer class="footer text-center"><span>© Copyright <span id="copyright"></span> Material</span></footer>
      </div>
    </div>
    <!-- Scripts-->
    <script src="scripts/app.js"></script>
  </body>
</html>